<template>
  <div class="card gap-col-10">
    <div class="light"></div>
    <div class="content gap-col-5">
      <div class="text-input font-size-12 font-style-normal font-weight-400 line-height-120">
        {{ $t(props.label) }}
      </div>
      <div class="text-white font-size-14 font-style-normal font-weight-500 line-height-140">{{ props.text }}</div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  label: {
    type: String,
  },
  text: {
    type: String,
  },
})
</script>
<style scoped lang="scss">
.card {
  display: flex;
  height: 4.4375rem;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: start;

  border-radius: 0.625rem;
  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.15) inset, 0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 1) inset;

  .light {
    width: 100%;
    height: 4.4375rem;

    position: absolute;
    top: 0;
    opacity: 0.5;
    background: linear-gradient(137deg, #fff 0%, rgba(0, 0, 0, 0) 100%);
    mix-blend-mode: overlay;

    border-radius: 0.625rem;
  }
  .content {
    padding-left: 1rem;
  }
}
</style>
